<template>
    <div class="data-page">
        <DataCondition
                :msg="msg"
                :baseMsg="baseMsg"
                @pageClick="pageClick"
                @pageSearch="pageSearch"
                @pageReset="pageReset"/>
        <DataTable
                :tableOptions="tableOptions"
                @pageChange="pageChange"/>
    </div>
</template>

<script>
    import Axios from 'axios'
    import DataCondition from './dataPage/DataCondition.vue'
    import DataTable from './dataPage/DataTable.vue'

    let apiUrl = 'http://172.30.11.152/api/data/search/'

    export default {
        components: {
            DataCondition,
            DataTable,
        },
        data() {
            return {
                msg: {   // 查询条件
                    searchText: '', // 搜索关键字
                    dateStart: '',
                    dateEnd: '',
                    regionList: [],  // 区域选择列表
                    tags: [], // 标签列表
                    pageNum: 1
                },
                baseMsg: {   // 基础渲染数据
                    selectBox: [],
                    checkBox: [],
                },
                tableOptions: {
                    data: [],
                    pagination: {}
                },
            }
        },
        mounted() {
            getTableData({
                dataObj: this.tableOptions
            },this)
        },
        methods: {
            // 搜索按钮方法
            pageSearch(flag, senior) {
                if (flag) {
                    // 获取图表数据
                    getTableData({
                        dataObj: this.tableOptions,
                        params: !senior && {searchText: this.msg.searchText} || this.msg
                    },this)
                }
            },
            // 确定按钮方法
            pageClick(flag) {
                if (flag) {
                    // 获取图表数据
                    getTableData({
                        dataObj: this.tableOptions,
                        params: this.msg
                    },this)
                }
            },
            // 重置按钮方法
            pageReset(flag) {
                if (flag) {
                    resetFunc(this.msg)
                    resetFunc(this.baseMsg)
                    // 获取图表数据
                    getTableData({
                        dataObj: this.tableOptions,
                        params: this.msg
                    },this)
                }
            },
            // 页码改变
            pageChange(curPageNum) {
                this.msg.pageNum = curPageNum
                // 获取图表数据
                getTableData({
                    dataObj: this.tableOptions,
                    params: this.msg
                },this)
            }
        }
    }

    // 请求表格数据方法
    async function getTableData(args, msgbox) {
        let url = apiUrl
        if (args.params) {
            url += '?params=' + JSON.stringify(args.params)
        } else {
            url += '?params={}'
        }
        let result = []
        console.log(url)
        await Axios.get(url).then(res => {
            // 获取表格数据
            result = res.data.data
            args.dataObj.data = res.data.data.tableData
            args.dataObj.pagination = res.data.data.pageData
            msgbox.$message({
                message: res.data.data.pageData.total>0 && `系统共查询数据 ${res.data.data.pageData.total} 条`
                         ||
                         '未搜索到任何结果',
                center:true,
                type: res.data.data.pageData.total>0 && 'success' || 'error'
            })
        })
        return result
    }

    // 重置方法
    function resetFunc(temp) {
        for (let i in temp) {
            if (Array.isArray(temp[i])) {
                temp[i] = []
            } else if (typeof temp[i] == 'string') {
                temp[i] = ''
            } else if (typeof temp[i] == 'number') {
                temp[i] = 1
            }
        }
    }

</script>

<style scoped>
    .data-page {
        padding: 10px;
    }
</style>
